/**
 * loading 占位
 * 解决首次加载时白屏的问题
 */
(function () {
  const _root = document.querySelector('#root');
  if (_root && _root.innerHTML === '') {
    _root.innerHTML = `
      <style>
      html, body, #root {
    height: 100%;
    margin: 0;
    padding: 0;
    /* 防止页面滚动 */
  }
@font-face {
  font-family: 'CyberpunkFont';
  src: url('/fonts/SportypoReguler-OVGwe.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
  #root {
    position: relative;
  }
 .container {
    display: flex;
    justify-content: center;
    align-items: center;

  }
  /* 视频背景 */
  .video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保持视频宽高比并填充容器 */
    z-index: -1;
  }

.techno-hologram-sphere {
position: relative;
width: 100px;
height: 100px;
border-radius: 50%;
perspective: 800px;
margin-top: 30vh;
}
.techno-hologram-sphere .techno-hologram-sphere-inner {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
}
.techno-hologram-sphere .techno-hologram-sphere-inner:nth-child(1) {
border-bottom: 6px solid #FF013C;
transform: rotateX(35deg) rotateY(-45deg);
animation: rotate-one 1s linear infinite;
}
.techno-hologram-sphere .techno-hologram-sphere-inner:nth-child(2) {
border-right: 6px solid #F8F005;
transform: rotateX(50deg) rotateY(10deg);
animation: rotate-two 1s linear infinite;
}
.techno-hologram-sphere .techno-hologram-sphere-inner:nth-child(3) {
border-top: 6px solid #531dab;
transform: rotateX(35deg) rotateY(55deg);
animation: rotate-three 1s linear infinite;
}
@keyframes rotate-one {
  to{
  transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
  }
}
@keyframes rotate-two {
  to{
  transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
  }
}
@keyframes rotate-three {
  to{
  transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
  }
}
@keyframes hologramRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes hologramPulse {
  0% { box-shadow: 0 0 10px 3px rgba(74, 144, 226, 0.3), inset 0 0 10px 2px rgba(255, 255, 255, 0.3); }
  50% { box-shadow: 0 0 20px 5px rgba(74, 144, 226, 0.6), inset 0 0 15px 3px rgba(255, 255, 255, 0.6); }
  100% { box-shadow: 0 0 10px 3px rgba(74, 144, 226, 0.3), inset 0 0 10px 2px rgba(255, 255, 255, 0.3); }
}

  /* 文字内容 */
  .loading-text-container {
    text-align: center;
    margin-top: 30px;
    color: white;
    position: relative;
     z-index: 999/* 确保文字位于视频层上方 */
  }
  .loading-title {
  font-family: 'CyberpunkFont', sans-serif; /* 使用新字体，并设置备选字体 */
  text-shadow: 0 0 5px #00FFFF, 0 0 10px #0000FF; /* 添加霓虹光影效果 */
    font-size: 2rem;
    color: yellow;
    font-weight: bold;
    margin-bottom: 15px;
  }
  .loading-sub-title {
  font-family: 'CyberpunkFont', sans-serif; /* 使用新字体，并设置备选字体 */
  text-shadow: 0 0 5px #00FFFF, 0 0 10px #0000FF; /* 添加霓虹光影效果 */
    font-size: 1.2rem;
    color: yellow;
  }
  .glitch {
  position: relative;
  color: yellow;
  font-size: 2rem;
  animation: glitch 2s infinite;
}
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  color: #FF0080;
  background: #000;
  clip-path: inset(5% 0 5% 0);
  animation: glitchOffset 2s infinite, glitchColor 2s infinite;
}

.glitch::after {
  clip-path: inset(0 5% 0 5%);
  animation-delay: 1s;
}

@keyframes glitch {
  2%, 6% { transform: translateX(-5px); }
  4%, 8% { transform: translateX(5px); }
}
@keyframes glitchOffset {
  0%, 100% { clip-path: inset(0); }
  20%, 40%, 60%, 80% { clip-path: inset(10% 0 10% 0); }
}
@keyframes glitchColor {
  20%, 40%, 60%, 80% { color: yellow; }
}
</style>

<div id="root">
  <!-- 视频背景 -->
  <video autoplay loop muted class="video-background">
    <source src="https://gw.alipayobjects.com/v/huamei_gcee1x/afts/video/jXRBRK_VAwoAAAAAAAAAAAAAK4eUAQBr" type="video/mp4">
    <!-- 兼容性文本或备用内容 -->
  </video>

  <!-- 动态全息球加载效果 -->
<div class="container">

  <!-- 动态全息球加载效果 - 优化版 -->
  <div class="techno-hologram-sphere">
  <div class="techno-hologram-sphere-inner"></div>
  <div class="techno-hologram-sphere-inner"></div>
  <div class="techno-hologram-sphere-inner"></div>
  </div>

</div>
<div class="loading-text-container">
    <div class="loading-title glitch">Activate the AI core</div>
    <div class="loading-sub-title glitch">Connecting to the E-API</div>
  </div>
  <!-- 加载文字提示 -->

</div>
    `;
  }
})();
